<template>
    <div ref="main" style="width:180%;height:500px;backgroundColor:#f5f5f5"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            ydata:[]
        }
    },
    computed:{
        options(){
            return{
                xAxis:{
                    data:['1月','2月','3月','4月','5月','6月','7月']
                },
                yAxis:{},
                series:[
                    {
                        type:'line',
                        data:this.ydata
                    }
                ]
            }
        }
    },
    watch:{
        options(newval){
            this.chart.setOption(newval)
        }
    },
    methods:{
        getWsData(){
            //创建WebSocket客户端对象
            let ws=new WebSocket('ws://127.0.0.1:9999')
            //客户端打开连接的方法
            ws.onopen=()=>{
                console.log('客户端连接服务器');
                //客户端向服务器发送信息
                ws.send(1)
            }
            ws.onerror=()=>{
                console.log('连接失败');
            }
            //接收正确信息
            ws.onmessage=(msg)=>{
                console.log(msg.data);
                //转换字符串为JSON对象
                this.ydata=JSON.parse(msg.data)
            }
        }
    },
    created(){
       this.getWsData()
    },
    mounted(){
        this.chart=echarts.init(this.$refs.main)
      
    }
}
</script>

<style>

</style>